<template>
	<uni-collapse-item :title="title" :thumb="thumb" :open="true">
		<view class="legal-item" v-for="(item, index) in basis" :key="item.id" @click="navigateToIndex(item.id)">
			<view class="legal-header">
				<view class="header-index">{{ index+ 1}}</view>
				<view class="header-title">{{ item.title }}</view>
			</view>
			<view class="legal-content">
				<view class="legal-first">
					<view class="first-left">{{ '第'+item.provisions[0].num+'条' }}</view>
					<view class="first-right">{{ item.provisions[0].text}}</view>
				</view>
				<view class="legal-other">
					<view class="other-left">其它</view>
					<view class="other-right">
						<uni-tag v-for="(provision, pIndex) in item.provisions.slice(1)" :key="pIndex" :text="'第'+provision.num+'条'"
							type="primary" :inverted="true" size="small" class="tag-item"
							custom-style="font-size:23rpx; color: #2568e6;" />
					</view>
				</view>
			</view>
		</view>
	</uni-collapse-item>
</template>

<script setup>
	import {
		defineProps
	} from 'vue';

	const props = defineProps({
		basis: {
			type: Array,
			required: true,
		},
		title: {
			type: String,
			default: '法律依据'
		},
		thumb: {
			type: String,
			default: 'https://riddle.miyucaicai.cn/basis.png'
		},
	})
	
	const navigateToIndex = (id) => {
		uni.navigateTo({
			url: '/pages/notice/detail?articleId='+id
		});
	};
</script>

<style scoped lang="scss">
	.legal-item {
		margin: 5rpx 0 18rpx 0;
		padding: 0 20rpx;
		background-color: #fff;
		border-radius: 10rpx;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

		.legal-header {
			display: flex;
			align-items: center;
			background-color: #f0f0f0;
			padding: 0 10rpx;
			border-radius: 6rpx;
			margin-bottom: 10rpx;

			.header-index {
				font-size: 31rpx;
				font-weight: bold;
				margin-right: 10rpx;
				width: 5%;
			}

			.header-title {
				font-size: 32rpx;
				font-weight: bold;
			}
		}

		.legal-content {

			.legal-first,
			.legal-other {
				display: flex;
				margin-bottom: 10rpx;

				&:last-child {
					margin-bottom: 0;
				}

				.first-left,
				.other-left {
					width: 20%;
					font-size: 27rpx;
					color: #666;
				}

				.first-right,
				.other-right {
					width: 80%;
					font-size: 30rpx;
					color: #333;
				}

				.other-right {
					display: flex;
					flex-wrap: wrap;
					justify-content: flex-start;
					align-items: center;

					.tag-item {
						margin: 8rpx;
					}
				}
			}
		}
	}
</style>